<template>
  <div class="h-screen flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 overflow-hidden">
    <div class="max-w-md w-full text-center space-y-4">
      <!-- 错误图标 -->
      <div class="text-primary mb-2">
        <Icon name="uil:exclamation-triangle" class="text-7xl md:text-8xl" />
      </div>
      
      <!-- 错误标题 -->
      <UCard class="border-primary-200 dark:border-primary-800 max-h-[60vh] overflow-auto">
        <template #header>
          <h1 class="text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400">{{ error?.statusCode || 404 }}</h1>
          <p class="text-lg md:text-xl text-gray-600 dark:text-gray-400 mt-1">
            {{ error?.message || '页面未找到' }}
          </p>
        </template>
        
        <div class="py-2 text-gray-500 dark:text-gray-400 text-sm md:text-base">
          <p>抱歉，您访问的页面不存在或已被移除。</p>
          <p class="mt-1">请检查您输入的网址是否正确，或返回首页继续浏览。</p>
        </div>
        
        <template #footer>
          <div class="flex justify-center">
            <UButton
              to="/"
              color="primary"
              variant="solid"
              icon="i-uil-home"
              size="md" class="mt-1"
            >
              返回首页
            </UButton>
          </div>
        </template>
      </UCard>
    </div>
  </div>
</template>

<script setup lang="ts">
const error = useError();

// 设置页面标题
useHead({
  title: `错误 ${error?.statusCode || 404} - 页面未找到`
});
</script>
